<template>
  <div>
    <div class="income-div-div">
      <el-card style="width: 100%;height: 600px;" >

        <div style="vertical-align: top">
          <div style="display: inline-block;">
            <span style="margin-right: 10px">单据编号: </span>
            <input type="text" class="document_input1" placeholder="请输入单据编号" >
          </div>

          <div style="display: inline-block">
            <span class="demonstration">单据日期: </span>
            <el-date-picker
                class="bill_date"
                style="padding: 0px 10px;width: 250px;"
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>

          <div style="display: inline-block;">
            <span style="margin-right: 10px">来往单位: </span>
            <select name="city" class="div-select-01">
              <option value="bj"></option>
            </select>
          </div>


          <div style="display: inline-block;margin-bottom: 15px">
            <input type="button" value="查询" @click="select()" class="div-select-button-01">
            <input type="button" value="重置" @click="reset()" class="div-reset-button-01">
            <input type="button" :value="upfold" @click="unfold()" class="div-unfold-button-01">
            <i :class="upfoldIcon"></i>
          </div>

          <div id="dv" style="display:none;">

            <div style="display:inline-block;">
              <span style="margin-right: 10px">财务人员: </span>
              <select name="city" class="div-finance-person-01">
                <option value="bj"></option>
              </select>
            </div>

            <div style="display: inline-block;">
              <span style="margin-right: 10px">操作员: </span>
              <select name="city" class="div-operator-01">
                <option value="bj"></option>
              </select>
            </div>

            <div style="display: inline-block;">
              <span style="margin-right: 10px">支出账户: </span>
              <select name="city" class="div-select-01">
                <option value="bj"></option>
              </select>
            </div>

            <div style="display: inline-block;">
              <span style="margin-right: 10px">单据状态: </span>
              <select name="city" class="div-select-01">
                <option value="bj"></option>
              </select>
            </div>
          </div>
        </div>

        <div style="margin-top:20px;margin-bottom: 10px">
          <input type="button" value="新增" @click="selectNew()" class="div-new-button-01">
          <input type="button" value="批量操作" @click="bulkOperation()" class="div-batch-operation-button-01">
        </div>

        <el-table
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="id"
              label=""
              width="100%">
          </el-table-column>
          <el-table-column
              prop="name"
              label="来往单位"
              width="100%">
          </el-table-column>
          <el-table-column
              prop="province"
              label="财务人员"
              width="100%">
          </el-table-column>
          <el-table-column
              prop="city"
              label="单据编号"
              width="300%">
          </el-table-column>
          <el-table-column
              prop="address"
              label="单据日期"
              width="200%">
          </el-table-column>
          <el-table-column
              prop="zip"
              label="操作员"
              width="100%">
          </el-table-column>
          <el-table-column
              prop="zip"
              label="收入金额"
              width="100%">
          </el-table-column>
          <el-table-column
              prop="zip"
              label="备注"
              width="200%">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      upfold:'展开',
      upfoldIcon:'el-icon-arrow-down',
      tableData: [{
        date: '',
        name: '',
        address: '',

      }, {
        date: '',
        name: '',
        address: ''
      }, {
        date: '',
        name: '',
        address: ''
      }, {
        date: '',
        name: '',
        address: '',
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    select(){
      //查询按钮
    },
    reset(){
      //重置按钮
    },
    unfold(){
      //展开按钮
      if (this.upfold === "展开") {
        // 如果是隐藏，那么点击后通过div盒子的id修改css样式，将display属性值改为none
        document.getElementById("dv").style.display = "block";
        //this关键字获取的是当前对象  通过this关键字来修改button的value值
        this.upfold = "收起";
        this.upfoldIcon="el-icon-arrow-up"
      } else if(this.upfold === "收起") {
        // 如果是显示，那么点击后通过div盒子的id修改css样式，将display属性值改为block
        document.getElementById("dv").style.display = "none";
        //this关键字获取的是当前对象  通过this关键字来修改button的value值
        this.upfold = "展开";
        this.upfoldIcon="el-icon-arrow-down"
      }

    }

  }
}
</script>

<style>
.income-div-div{
  margin: 5px 5px;
}
.document_input1{
  display: inline-block;
  border: 1px solid gainsboro;
  width: 200px;
  height: 33px;
  border-radius: 3px;
  margin-right: 40px;
  padding: 0px 10px;
}
.bill_date{
  display: inline-block;
  height: 35px;
  width: 100px;
  padding: 0px;
  margin-right: 40px;

}
.demonstration{
  margin-right: 10px;
}
.div-select-01{
  width: 250px;
  height: 35px;
  border-radius: 3px;
  border: 1px solid gainsboro;
  margin-right: 20px;
}

.div-select-button-01{
  cursor:pointer;
  background-color: #1890ff;
  color: white;
  width: 70px;
  height: 35px;
  border: #1890ff;
  border-radius: 6px;
}
.div-select-button-01:hover{
  background-color: #40a9ff;
}
.div-reset-button-01{
  cursor:pointer;
  background-color: white;
  color: black;
  width: 70px;
  height: 35px;
  border: 1px solid darkgray;
  border-radius: 6px;
  margin:0px 10px;
}
.div-reset-button-01:hover{
  border: 1px solid  #1890ff;
  color: #1890ff;
}
.div-unfold-button-01{
  cursor:pointer;
  color: #1890ff;
  background-color: white;
  border: white;
}
.div-finance-person-01{
  width: 222px;
  height: 35px;
  border-radius: 3px;
  border: 1px solid gainsboro;
  margin-right: 55px;
}
.div-operator-01{
  width: 250px;
  height: 35px;
  border-radius: 3px;
  border: 1px solid gainsboro;
  margin-right: 40px;
}
.div-new-button-01{
  cursor:pointer;
  background-color: #1890ff;
  color: white;
  width: 100px;
  height: 35px;
  border: #1890ff;
  border-radius: 6px;
}
.div-new-button-01:hover{
  background-color: #40a9ff;
}
.div-batch-operation-button-01{
  cursor:pointer;
  background-color: white;
  color: black;
  width: 100px;
  height: 35px;
  border: 1px solid darkgray;
  border-radius: 6px;
  margin-left: 10px;
}
.div-batch-operation-button-01:hover{
  border: 1px solid  #1890ff;
  color: #1890ff;
}
</style>
